<template>
  <Dialog v-model="visible" title="资源设置" :width="1000">
    <el-button @click="openSelectPermission" type="primary">新增</el-button>
    <Table
        ref="menuTableRef"
        :data="list"
        :columns="columns"
        custom-id="basic-menu"
        :is-page="false"
      > 
        <template #column-operate="{ row }">
          <el-popconfirm @confirm="deleteMenuPermission(row)" title="是否确认删除">
            <template #reference>
              <el-button type="danger" link>
                <Icon icon="ep:delete" />删除
              </el-button>
            </template>
          </el-popconfirm>
        </template>
      </Table>
    <template #footer>
      <el-button @click="visible = false" type="danger">取消</el-button>
      <el-button @click="submit" type="primary">确认</el-button>
    </template>
  </Dialog>
  <SelectPermission ref="SelectPermissionRef" @submit="onSelectPermission"></SelectPermission>
</template>
<script setup lang="ts">

  import {ref, unref, nextTick, watch, reactive, computed} from 'vue'
  import { ElButton, ElMessage } from 'element-plus'
  import { Dialog, Table, TableColumnItem, Icon } from "@/components";
  import { selectMenuPermissionListApi, saveMenuPermissionApi } from '@/api/system/menu'
  import SelectPermission from './select-permission.vue'
  const emit = defineEmits<{
    (e: 'submit')
  }>()
  
  const SelectPermissionRef = ref<InstanceType<typeof SelectPermission>>()
  const visible = ref(false)
  const menuId = ref<number>()
  const list = ref<any[]>()

  // 资源类型
  const permsTypeEnum = [
    { label: '资源', value: 1 },
    { label: '按钮', value: 2 },
  ]

  const columns: TableColumnItem[] = [
    {
      label: '资源名称',
      prop: 'permsName',
      fixed: 'left',
    },
    {
      label: '资源类型',
      prop: 'permsType',
      list: permsTypeEnum,
      tagType: {
        1: 'warning',
        2: 'primary'
      }
    },
    {
      label: '权限码',
      prop: 'permsCode',
    },
    {
      label: '接口地址',
      prop: 'path'
    },
    {
      label: '添加时间',
      prop: 'createTime'
    },
    {
      label: '操作',
      slot: 'column-operate',
      width: 100
    },
  ] 

  const init = async () => {
    list.value = (await selectMenuPermissionListApi({ menuId: menuId.value })).data
  }

  // 打开资源选择弹框
  const openSelectPermission = () => {
    SelectPermissionRef.value.openDialog()
  }

  // 选择资源权限回调
  const onSelectPermission = (rows) => {
    const permissionIdList = list.value.map(item => item.permissionId)
    for(var item of rows) {
      if (!permissionIdList.includes(item.permissionId)) {
        permissionIdList.push(item.permissionId)
        list.value.push({
          permissionId: item.permissionId,
          permsName: item.permsName,
          permsType: item.permsType,
          permsCode: item.permsCode,
          path: item.path,
        })
      }
    }
  }

  // 刪除菜单资源权限
  const deleteMenuPermission = async (row) => {
    const index = list.value.findIndex(item => item.permissionId = row.permissionId)
    list.value.splice(index, 1)
  }

  // 保存
  const submit = async () => {
    const permissionIdList = list.value.map(item => item.permissionId)
    await saveMenuPermissionApi({
      menuId: menuId.value,
      permissionIdList
    })
    emit('submit')
    visible.value = false
  }

  const openDialog = (menu_id?: number, readonlyFalg = false) => {
    menuId.value = menu_id
    init()
    visible.value = true
  }


  defineExpose({
    openDialog
  })
</script>
